<!DOCTYPE html>
<html lang="en" debug=true>
<head>
    <meta charset="utf-8">
    <title>audio.js</title>
    <script src="/statics/js/jquery.js"></script>
    <script src="/statics/audiojs/audio.js"></script>
    <link rel="stylesheet" href="/statics/includes/index.css" media="screen">

</head>
<body>

<audio preload="auto"></audio>

<button id="set">set music</button>

<script>
    $(function(){
        var global_playStatus = {
            audio: null,
            playing: false,
            lastUpdateTime : -1,
            serverStartPlayTime: -1,
            lastCheckServerTime: -1,
            lastCheckLocalTime: -1
        };

        var serverTimeTimer;

        var global_audio;

        audiojs.events.ready(function() {
            global_audio = audiojs.createAll()[0];
            waitForPlayerStatusChange();
        });


        var onAudioStatusChange = function (playStatusInfo, serverTime) {
            global_playStatus.playing = playStatusInfo.playing;
            if (!playStatusInfo.playing) {
                if (serverTimeTimer) {
                    clearInterval(serverTimeTimer);
                }
                global_audio.pause();
            } else {
                if (global_audio.mp3 != playStatusInfo.musicUrl) {
                    global_audio.load(playStatusInfo.musicUrl);
                }
                global_playStatus.serverStartPlayTime = playStatusInfo.startPlayTime;
                global_playStatus.lastCheckServerTime = serverTime;
                global_playStatus.lastCheckLocalTime = new Date().getTime();

                global_audio.play();

                if (serverTimeTimer) {
                    clearInterval(serverTimeTimer);
                }
                serverTimeTimer = setInterval(function () {
                    checkServerTime();
                }, 4000);

            }
        };

        function checkServerTime() {
            $.ajax({
                url: "/ajax/now",
                async: true,
                timeout: 1000,
                success: function (data, textStatus, jqXHR) {
                    if (data.ret == "0") {
                        var serverTime = data.time;
                        if (global_playStatus.playing) {
                            var severPlayed = serverTime - global_playStatus.serverStartPlayTime;
                            var localPlayed = global_audio.element.currentTime * 1000;
                            if (Math.abs(severPlayed - localPlayed) > 400) {
                                var percent = severPlayed / (1000 * global_audio.duration);
                                if (percent < global_audio.loadedPercent) {
                                    global_audio.skipTo(percent);
                                } else {
                                    global_audio.skipTo(global_audio.loadedPercent);
                                }
                                global_audio.play();
                            }
                        }
                    }
                }
            });
        }

        var waitForPlayerStatusChange = function () {
            $.ajax({
                url: "/status_sync/" + global_playStatus.lastUpdateTime,
                async: true,
                timeout: 50000,
                success: function (data, textStatus, jqXHR) {
                    if (data.ret == "0") {
                        global_playStatus.lastUpdateTime = data.status.updateTime;
                        onAudioStatusChange( data.status, data.serverTime);
                    }
                    waitForPlayerStatusChange();
                },

                error: function (data, status, e) {
                    setTimeout(function () {
                        waitForPlayerStatusChange();
                    }, 5000);
                }
            });
        };


        $("#set").click(function(){
            var o = new Object();
            o.src = "http://luoo-mp3.kssws.ks-cdn.com/low/they/20140408.mp3";
            o.playFrom = 0;
            o.startTime = new Date().getTime();
            $.ajax({
                type: 'POST',
                url: "/player/Play",
                contentType: "application/json",
                data: JSON.stringify(o),
                async: true,
            });
        });

    });
</script>
</body>
</html>